<style lang="scss" scoped>
@import '../../assets/login.scss';
</style>

<template>
	<div class="login-container">
		<van-nav-bar title="用户登录" />
		<div class="form">
			<div class="form-item">
				<p class="label">手机号码</p>
				<van-field v-model="form.mobile" name="mobile" type="number" placeholder="请输入手机号码" size="large" center clearable></van-field>
			</div>
			<div class="form-item">
				<p class="label">用户密码</p>
				<van-field v-model="form.password" name="password" type="password" placeholder="请输入密码" size="large" center clearable></van-field>
			</div>
			<div class="btn-box">
				<van-button type="default" color="#179AFE" block @click="loginFn">登录</van-button>
				<div class="tip">
					<router-link class="link text-left" style="color:#cacaca;" to="/resetPassword">忘记密码</router-link>
					<router-link class="link text-right" to="/register">注册账号</router-link>
				</div>
			</div>
		</div>
		<!-- 标签栏 -->
		<Tabbar></Tabbar>
	</div>
</template>

<script>
import { mapActions } from 'vuex';
import Tabbar from '@/components/Tabbar';

export default {
	name: 'Login',
	components: {
		Tabbar
	},
	data() {
		return {
			form: {
				mobile: '',
				password: ''
			}
		};
	},
	methods: {
		...mapActions(['handleLogin']),
		async loginFn() {
			if (this.form.mobile && this.form.password && this.form.mobile !== '' && this.form.password !== '') {
				const { code, message } = await this.handleLogin(this.form);
				if (code === 200) {
					this.$toast.success('登录成功!');
					this.$router.replace('/user/index',()=>{},()=>{});
				} else {
					this.$toast(message);
				}
			} else {
				this.$toast('请输入账号和密码!');
			}
		}
	}
};
</script>
